{extend name="public/nav" /}
{block name="title"} 档案管理系统 {/block}
{block name="content"}
<style type="text/css" media="all">
    input{
        border: none;
    }
    .layui-btn-color{
        background-color: transparent;
        color: #2D93CA;
        font-weight: bold;
    }
    .search{
        background-color: #1296db;
        padding: 5px 15px;
        background-image: linear-gradient(180deg,#eeeeee, #c0c4cc);
        border-bottom: 1px solid #eeeeee;
    }
    .layui-ul-li-left{
        width: calc( 100% - 50px );
        float: left;
    }
    .layui-ul-li-right{
        width: 50px;
        float: right;
    }
    .layui-ul-li{
        height: 80px;
        background-color: #eeeeee;
        border-radius: 10px;
        padding: 10px;
        margin: 10px auto;
    }
    .layui-ul-li-title{
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        color: #1296db;
    }
    .layui-ul-li-time{
        color: #9F9F9F;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        margin-top: 3px;
    }
    .layui-ul-li-action{
        width: 100%;
        line-height: 25px;
    }
    .layui-ul-li-action a{
        display: block;
        width: 100%;
        text-align: center;
    }
</style>
<div class="site-content" style="background-color: #cccccc;height: auto;">
    <div class="site-h1">
        <i class="layui-icon layui-icon-left" onclick="window.location.href='/'"></i>管道列表
    </div>
    <div class="search">
        <form class="layui-form">
            <div class="layui-input-inline" style="margin-left:0px;width: calc( 100% - 64px );float: left">
                <input type="text" name="name" value="{if condition='isset($param.name) && !empty($param.name)'}{$param.name}{/if}"  placeholder="管道名" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline" style="margin-left:0px;">
                <button class="layui-btn layui-btn-color" type="submit">查询</button>
            </div>
        </form>
    </div>
    <div class="layui-container">
        <div class="site-text" style="margin-top: 10px;">
            <ul class="layui-ul" id="page">

            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['layer','jquery','flow'],function(){
        var layer = layui.layer,$ = layui.jquery,flow = layui.flow;
        //流加载
        flow.load({
            elem: '#page' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                var name = $('input[name=name]').val();
                $.get('{:url("index/api/pipes_list")}?page='+page+'&name='+name, function(res){
                    //假设你的列表返回在data集合中
                    var lis = [];
                    layui.each(res.data.data, function(index, item){
                        if(item['name']){
                            item['name'] = item['name']
                        }else{
                            item['name'] = '暂无'
                        }
                        lis.push('<li class="layui-ul-li">\n' +
                            '                    <div class="layui-ul-li-left">\n' +
                            '                        <div class="layui-ul-li-title">'+item['name']+'</div>\n' +
                            '                        <div class="layui-ul-li-time">编号：'+item['unit_id']+'</div>\n' +
                            '                    </div>\n' +
                            '                    <div class="layui-ul-li-right">\n' +
                            '                        <div class="layui-ul-li-action">\n' +
                            '                             <a href="/index/pipes/edit?id='+item['id']+'">编辑</a>\n' +
                            '                             <a href="javascript:;" class="del" onclick="del(this)" data-id="'+item['id']+'" data-name="'+item['name']+'">删除</a>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                </li>');
                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages);
                });
            }
        });

    });

    function del(obj) {
        layui.use(['layer','jquery'],function() {
            var layer = layui.layer,$ = layui.jquery;
            var id = $(obj).attr('data-id');
            var user_name = $(obj).attr('data-name');
            layer.confirm('您确定要删除 ( ' + user_name + ' ) ?', function () {
                $.post('{:url("index/pipes/del")}', {id: id}, function (res) {
                    layer.msg(res.msg);
                    window.location.reload();
                }, 'json');
            });
        });
    }
</script>
{/block}